<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Artical - Shikkaku</title>
	<link rel="shortcut icon" href="../icon.ico"/>
	<link href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"><!-- 引入font awesomeCSS文件 -->
	<link rel="stylesheet" type="text/css" href="../css/artical.css"><!-- 引入CSS文件 -->
</head>
<body>

	<div class="art-click">
		<a href="../home.html"><img class="logo" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/Lk52YmNVzLWXGgPrzMnlhPFYyw0Nw8ZxpVjtXY6InBY!/r/dGwBAAAAAAAA"/></a>
		<div class="top">TOP</div>
		<div class="menu">
			<span class="fa fa-list"></span><br/>
			M<br/>E<br/>N<br/>U
			<div class="menu-info">
				<div class="menu-info-img clearfix">
					<div class="left">前端文章</div>
					<div class="right">脑洞文章</div>
				</div>
				<div class="menu-info-text">
					<div class="group1">
						<a href="artical1.html">关于简历页面的搭建</a><br/>
						<a href="artical2.html">tips笔记</a>
					</div>
					<div class="group2">
						<a href="artical3.html">冬至</a><br/>
						<a href="artical4.html">龋齿</a>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="art-back">
		<div class="container">
			<div class="back">
				<img src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/OKDCNwYWnXKNejPjckFw4FxxjGgeFz9h7Y*K1JoNkjo!/r/dDwBAAAAAAAA"/>
			</div>
			<div class="side">
				<div class="side-img side-img1"></div>
				<div class="side-text">
					页面搭建用时<br/>
					10天左右<br/>
					一半以上的时间用在了<br/>
					素材寻找和页面构想
				</div>
			</div>
		</div>
	</div>

	<div class="art-title">
		<div class="container">
			<h4><span>[前端]</span>2033.02.31 UPDATE</h4>
			<h2>关于简历页面的搭建</h2>
			<p>三天摸鱼两天装死的写页面经历</p>
		</div>
	</div>

	<div class="art-info">
		<div class="container">
				<div>
					<h4>6.10</h4>
					<p>index页面文案与整体布局构想<br/>
					section1 布局及动画实现<br/>
					section2 布局及动画逻辑</p>
					
					<h4>6.11</h4>
					<p>section2动画效果实现<br/>
					section3结构搭建</p>
					
					<h4>6.12</h4>
					<p>section3 动画效果实现<br/>
					section4 基本布局</p>
					
					<h4>6.13</h4>
					<p>玩儿</p>
					
					<h4>6.14</h4>
					<p>section4 公用动画效果、鼠标事件函数封装</p>
					
					<h4>6.15</h4>
					<p>section4 bug修整<br/>
					section5 页面布局搭建、脚本代码完成<br/>
					（index页制作结束）</p>
					
					<h4>6.16</h4>
					<p>寻找home页面板式参考<br/>
					home页面文案大致规划<br/>
					home页面header部分样式完成</p>

					<h4>6.17</h4>
					<p>home页面banner部分样式及动效完成<br/>
					home页面aboutme部分样式及动效完成<br/>
					视觉差滚动背景效果完成</p>
					
					<h4>6.18</h4>
					<p>resume部分样式完成</p>
					
					<h4>6.19</h4>
					<p>resume部分动效完成<br/>
					hobby部分基本结构搭建</p>
					
					<h4>6.20</h4>
					<p>玩儿</p>
					
					<h4>6.21</h4>
					<p>hobby部分动画完成<br/>
					artical与footer部分样式完成</p>
					
					<h4>6.22</h4>
					<p>home页面滚轮事件<br/>
					home页面文案完善与修正<br/>
					（home页面完成）</p>
					
					<h4>6.23</h4>
					<p>artical页面布局与动效<br/>
					（artical页面完成)</p>

					<h4>6.24</h4>
					<p>页面整体调整与完善</p>

					<h4 class="last">——版式参考——</h4>
					<a target="_blank" href="http://cupbon.prima-shop.jp/#top">CUPBON オンラインショップ</a><br/>
					<a target="_blank" href="https://namadorayaki.com/">DOUドウ——生どら焼き専門店</a><br/>
					<a target="_blank" href="http://mediashop.daimaru-matsuzakaya.jp/hajimekata/">始め方研究所</a>
				</div>
		</div>
	</div>

	<footer id="contact-me" class="contact-me">
		<div class="container">
			<h3>CONTACT ME</h3>
			<div class="footer-icon">
				<span class="fa fa-mobile"></span>
				<span class="fa fa-weibo"></span>
				<span class="fa fa-qq"></span>
				<span class="fa fa-weixin"></span>
			</div>
			<p>-  2017.06  -  All By Shikkaku</p>
			<div class="scan">
				<img class="scan1" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/oLckW28EvtxNSBPw8COtYpXYFeVsMwfH8uPuNBQsz9Q!/r/dD0BAAAAAAAA"></img>
				<img class="scan2" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/PTDPpGThKJ1NFuL7ZAPcXhaFBriu.7ZYCfDUeMA6ibA!/r/dD0BAAAAAAAA"></img>
				<img class="scan3" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/GPukg8SBmW31DaElpMoo88rWDPFRf0MUS6urSY4y6HE!/r/dD0BAAAAAAAA"></img>
				<img class="scan4" src="http://r.photo.store.qq.com/psb?/V10ey5yu03MxuF/WmKZRDQCnhXS.hpVrq4j*VyHnFWCJ3kPf4mcFVxTjsw!/r/dDwBAAAAAAAA"></img>
			</div>
		</div>
	</footer>
	
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><!-- 引入jQuery -->
	<script type="text/javascript" src="../js/artical.js"></script><!-- 引入JS脚本文件 -->
</body>
</html>